<template>
<div class="CollectorsList">
    <el-row>
        <el-col :span="24">
            <el-card>

                <el-form :model="searchForm" class="choicemember" label-width="85px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="采集人员">
                                <el-input v-model="searchForm.userName" maxlength="15" show-word-limit> </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" :offset="0">
                            <el-form-item label="角色">
                                <el-select v-model="searchForm.userLevel" placeholder="">
                                    <el-option label="请选择" :value="0"></el-option>
                                    <el-option label="村级" :value="5"></el-option>
                                    <el-option label="镇级" :value="4"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" :offset="1">
                            <el-button type="primary" @click="list">查询</el-button>
                        </el-col>
                        <!-- <el-col :span="4" :offset="0">
          <el-form-item label="镇街">
            <el-select v-model="searchForm.street" placeholder="">
              <el-option
              :label="item.lable"
              :value="item.value"
              v-for="(item,index) in options" :key="item.value"
              @click.native="townIndex = index"></el-option>
            </el-select>
          </el-form-item>
        </el-col> 
         <el-col :span="4" :offset="0">
          <el-form-item label="村居">
            <el-select v-model="searchForm.userAdministrativeCode" placeholder="">
              <el-option
              :label="item.lable"
              :value="item.value"
              v-for="(item,index) in options[townIndex].children" :key="item.value"
              @click.native="townIndex = index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>  -->
                    </el-row>
                </el-form>
            </el-card>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="24">
            <el-card>
                <!-- <div class="button-group">

<el-button type="primary" @click="createMember">新增</el-button>

</div> -->

                <el-table :data="tableData" border style="width: 100%">
                    <!-- <el-table-column prop="id" label="ID"> </el-table-column> -->
                    <el-table-column prop="userName" label="姓名"> </el-table-column>
                    <el-table-column prop="userLevel" label="角色">
                        <template slot-scope="scope">{{scope.row.userLevel=='5'?'村级':'镇级'}}</template>
                    </el-table-column>
                    <!-- <el-table-column prop="userTown" label="街镇"> </el-table-column> -->
                    <el-table-column prop="administrativeName" label="辖区"> </el-table-column>
                    <el-table-column prop="userAdministrativeCode" label="辖区编号"> </el-table-column>
                    <el-table-column prop="registerCard" label="身份证"> </el-table-column>
                    <el-table-column prop="registerTele" label="联系方式"> </el-table-column>
                    <el-table-column label="操作" class-name="operation">
                        <template slot-scope="scope">
                            <el-link type="primary" @click="editShow(scope.row)">编辑</el-link>

                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination layout="total, sizes, prev, next, pager, jumper" @size-change="sizeChange" @current-change="currentChange" :page-sizes="[10, 20,30,50]" :page-size="10" :total="total">
                </el-pagination>
            </el-card>
        </el-col>
    </el-row>

    <el-dialog title="采集人员" :visible.sync="memberModalStatus" :close-on-click-modal="false" width="40%" :destroy-on-close="true">
        <!-- memberInfo -->
        <!--        :rules="rules" -->
        <el-form :model="collectUser"  :rules="rules" status-icon ref="collectUser" label-width="100px" :inline="false" size="normal">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="userName">
                        <el-input v-model="collectUser.id" v-show="false"> </el-input>
                        <el-input v-model="collectUser.userName" maxlength="15" show-word-limit :disabled="true"> </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号码" prop="registerTele">
                        <el-input v-model="collectUser.registerTele" maxlength="11" show-word-limit> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="身份证号" prop="registerCard">
                <el-input v-model="collectUser.registerCard" minlength="15" maxlength="18" show-word-limit>
                </el-input>
            </el-form-item>
            <el-row>
                <el-col :span="12" :offset="0">
                    <el-form-item label="角色" prop="role">
                        <el-select v-model="collectUser.userLevel">
                            <el-option label="村级" :value="5"></el-option>
                            <el-option label="镇级" :value="4"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="mini" @click="onSubmit('collectUser')">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
// import axios from 'axios';
import axios from "@/api/request.js";

export default {
    name: "CollectorsList",
    data() {
        return {
            pageNum: 1,
            size: 10,
            total: 0,
            searchForm: {
                userName: "",
                userLevel: 0,
                userAdministrativeCode:""
            },
            memberInfo: {
                name: "",
                phone: "",
                userId: "",
                role: "",
                district: "",
                password: "",
                password2: "",
            },
            tableData: [],
            collectUser: {
                registerTele: "",
                userName: "",
                userLevel: 4
            },
            memberModalStatus: false,
            userMode: "CREATE",
            townIndex: 0,
            options: [{
                value: '实际值',
                label: '显示值'
            }],

            rules: {
                registerTele: [{
                        required: true,
                        message: '手机号码不能为空',
                        trigger: 'blur'
                    },
                    {
                        min: 11,
                        max: 11,
                        message: '手机号码必须是11位的',
                        trigger: 'blur'
                    }
                ],
                registerCard: [{
                        required: true,
                        message: '身份证号码不能为空',
                        trigger: 'change'
                    },
                    {
                        min: 15,
                        max: 18,
                        message: '请输入正确的身份证号码',
                        trigger: 'blur'
                    }
                ],
            }
        };
    },

    mounted() {
        this.list();
    },
    /*    computed:{
          ...mapState({
            options: (state) => state.VillageData.Village,
          }),
        }, */
    methods: {
        sizeChange(val) {
            console.log(val);
            this.size = val;
            this.list();
        },
        currentChange(val) {
            console.log(val);
            this.pageNum = val;
            this.list();
        },
        list() {
            axios.get(
                "baseinfo/api/v1.0/fishing/user/selecByPage", {
                    params: {
                        pageNumber: this.pageNum,
                        pageSize: this.size,
                        userName: this.searchForm.userName,
                        userLevel: this.searchForm.userLevel
                    }
                }).then((response) => {
                this.tableData = response.data.list;
                this.total = response.data.total;
            });
        },
        createMember() {
            this.memberModalStatus = true;
            this.userMode = "CREATE";
            this.collectUser = {};
        },

        editShow(row) {
            console.log(row);
            this.collectUser = row;
            this.memberModalStatus = true;
            this.userMode = "EDIT";
            /* axios.get(
                `baseinfo/api/v1.0/fishing/user/getById/${id}`, {
                    params: {}
                }).then((response) => {
                this.collectUser = response.data;

            }); */
        },
        editMember() {
            this.memberModalStatus = true;
            this.userMode = "EDIT";

        },
        onSubmit(formName) {

            this.$refs[formName].validate((valid) => {
                if (valid) {

                    if (this.userMode === 'EDIT') {
                        /* id:this.collectUser.id,
                         userName:this.collectUser.userName */
                        axios.post(
                                "baseinfo/api/v1.0/fishing/user/edit", {
                                    params: {
                                        id: this.collectUser.id,
                                        userName: this.collectUser.userName,
                                        registerTele: this.collectUser.registerTele,
                                        registerCard: this.collectUser.registerCard,
                                        userLevel: this.collectUser.userLevel,
                                    }
                                }
                            )
                            .then(result => {
                                console.log("******" + result.data)
                                this.list();
                            });
                    }
                    if (this.userMode === 'CREATE') {

                        axios.post(
                                "baseinfo/api/v1.0/fishing/user/add", {
                                    params: this.collectUser
                                }
                            )
                            .then(result => {
                                console.log("******" + result.data)
                                this.list();
                            });

                    }
                    this.memberModalStatus = false;
                    this.collectUser = {};

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
    },
};
</script>

<style lang="scss">
.CollectorsList {
    background-color: #fff;
    padding: 20px;

    .el-card {
        width: 98%;
        margin: 0 auto;

        .bottom {
            display: flex;
            justify-content: flex-end;
            margin-top: 15px;
        }
    }

    .el-form {
        padding: 0;

        .el-form-item__label {
            white-space: nowrap;
        }
    }

    .el-pagination {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
        text-align: right;
    }

    .button-group {
        margin: 20px 0;

        .el-button {
            width: 130px;
            margin-right: 10px;
        }
    }

    .choicemember {
        .el-form-item__content {
            display: flex;
        }
    }

    .el-link {
        margin: 0 5px;
    }

    .el-dialog {
        .el-dialog__title {
            font-size: 16px;
            font-weight: 700;
        }

        .el-dialog__body {
            padding: 0 40px;

            .el-form-item__label {
                text-align: left;
            }
        }

        .dialog-footer {
            display: flex;
            justify-content: center;

            .el-button {
                padding: 5px 30px;
            }
        }

        .tab-flex {
            .el-button {
                padding-top: 9px;
                padding-bottom: 9px;
            }
        }

    }
}
</style>
